/**
 * @description 拆分模态框组件
 * @author wangjianjun
 */

import React, { PropTypes, PureComponent, Fragment } from 'react';
import { PrimaryC, PrimaryGhostC, SecondHeaderC, TableC, NoQueryC, SecuritiesCodeC, codeType } from '../../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Card, Input, Button, message, Table, Divider, DatePicker, Select, Modal, Radio } from 'antd';
import styles from '../index.less';
import TransactionFlow from './TransactionFlow';
import colsObj from './dic';
const confirm = Modal.confirm;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
import { connect } from 'dva';
import 'moment/locale/zh-cn';
import uuid from 'es6-uuid';

@Form.create()
@connect(({ survivalManageM, initialSplitM, loading }) => ({
  survivalManageM,
  initialSplitM,
  loading: loading.effects['survivalManageM/getTransaction'],
}))
export default class CfModal extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      columns: [],
      dataSource: [],
      columns1: [],
      dataSource1: [],
      select1: [],
      selectData1: [],
      select2: [],
      selectData2: [],
      type: '3', //3智能拆分 4手工拆分
      smartSplitType: '', //智能拆分三个方式 默认空 1 有产品到期,无产品首期 2无产品首期,有真实交易 3有产品首期,有资产买入
      id: null,
      cfRate: '0.0000',
      splitType: 1, //默认智能拆分
      isDiabledSmart: false, //智能拆分转手工拆分的标志 true
    };
  }

  componentDidMount() {
    if (this.props.data && this.props.data.allocStatus == '1') {
      //allocStatus 1代表手工拆分
      this.setState({
        type: 4,
      });
      this.props.form.setFieldsValue({
        type: 2,
      });
      this.getSdTable(this.props.data.id, this.props.data);
    }

    if (this.props.id) {
      this.getZnSelect(this.props.id);
    }
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const {
      form: { setFieldsValue },
      dispatch,
    } = this.props;
    if (nextProps.id && nextProps.timeChange != this.props.timeChange) {
      this.getZnSelect(nextProps.id);
    }
    if (this.props.data && nextProps.timeChange != this.props.timeChange) {
      if (nextProps.data.allocStatus == '1') {
        this.setState({
          type: 4,
        });
        setFieldsValue({
          type: 2,
        });
        this.getSdTable(nextProps.data.id, nextProps.data);
      }
    }
  }

  //请求智能拆分下拉
  getZnSelect = (id) => {
    this.props.dispatch({
      type: 'survivalManageM/getProductByType',
      payload: {
        listId: id,
        type: '1',
      },
      callback: (res) => {
        if (res) {
          this.setState({
            select1: res,
          });
        }
      },
    });

    this.props.dispatch({
      type: 'survivalManageM/getProductByType',
      payload: {
        listId: id,
        type: '3',
      },
      callback: (res) => {
        if (res) {
          this.setState({
            select2: res,
          });
        }
      },
    });
  };

  //计算已分配比例 rowData {} 是当前行的数据 listData是弹窗底部拆分表格的数组
  calcRate = (rowData, listData) => {
    let fpTradeNum = 0;
    let fpRate = '0.0000%';
    listData.map((item) => {
      if (item.editable == false) {
        //取非标记状态的 且交易市场和资产代码 交易方向相等的数据
        if (item.aid && item.aid == rowData.aid && item.tradeDir && item.tradeDir == rowData.tradeDir) {
          fpTradeNum = Number(item.tradeNum) ? fpTradeNum + Number(item.tradeNum) : fpTradeNum;
        }
      }
    });
    fpRate = ((fpTradeNum / rowData.tradeTotalNum) * 100).toFixed(4);
    return fpRate;
  };
  //获取手动列表数据
  getSdTable = (id, data1) => {
    const { data } = this.props;
    const { smartSplitType } = this.state;
    this.props.dispatch({
      type: 'survivalManageM/getTransactionFlow',
      payload: {
        id,
      },
      callback: (res) => {
        if (res) {
          res.dataSource.map((item) => {
            item.editable = false; //后端返回的列表数据 默认不可编辑
          });
          const fpRate = this.calcRate(data1, res.dataSource || []);
          this.setState({
            //拆分之后 再次拆分
            columns:
              smartSplitType == 1 || smartSplitType == 3 || this.props.assetType == 1 ? colsObj.columnsMulti : data.tradeDir == 1 ? colsObj.columnsCash : colsObj.columnsHold, //多资产1 (单资产0 只有方向为1的时候展示可用现金 其他情况展示持仓数量)
            dataSource: res.dataSource,
            cfRate: fpRate,
          });
        }
      },
    });
  };

  //拆分取消
  cfCancel = () => {
    const {
      form: { setFieldsValue },
    } = this.props;
    this.props.changeVisible();
  };

  //拆分确定
  cfOK = () => {
    const {
      form: { setFieldsValue },
    } = this.props;
    let returnData = this.state.child.returnData();
    if (returnData && returnData.length > 0) {
      const dataArr = _.cloneDeep(returnData);
      dataArr.map((item) => {
        if (item.uid) {
          //智能拆分 去掉前端定义的唯一值
          delete item.uid;
        }
      });
      if (this.state.cfRate > 100) return message.error('已分配比例不能大于100%!');
      this.props.dispatch({
        type: 'survivalManageM/saveHandalSplitTrade',
        payload: {
          listId: this.props.id,
          id: this.props.data.id,
          dataSource: dataArr,
          isManual: this.state.splitType == 1 ? 0 : 1, //0是智能拆分，1是手工拆分
        },
        callback: (res) => {
          if (res) {
            this.props.changeVisible(); //关闭模态框
            this.props.getNewData(); //重新获取数据
          }
        },
      });
    } else {
      if (this.state.type == '3') {
        message.warning('无智能拆分数据，无法进行智能拆分操作!');
      }
      if (this.state.type == '4') {
        message.warning('请增加手工拆分数据!');
      }
    }
  };

  //拆分类型改变
  cfTypeChange = (e) => {
    const { data } = this.props;
    const { smartSplitType, dataSource1 } = this.state;
    this.setState({
      //修改radio的值
      splitType: e.target.value,
    });
    if (e.target.value == 2) {
      //手工拆分
      if (smartSplitType == '2') {
        //仅在单资产 智能拆分中选择的是“无产品首期，有真是交易”时，切换到手工拆分时，将设置数据带过去，其他两种情况，均不将数据带到手工拆分；
        this.setState({
          type: '4',
          columns: data.tradeDir == 1 ? colsObj.columnsCash : colsObj.columnsHold, //多资产1 (单资产0 只有方向为1的时候展示可用现金 其他情况展示持仓数量)
          dataSource: dataSource1,
        });
        return;
      } else if (smartSplitType == '1' || smartSplitType == '3') {
        //多资产情况下 需要将场景1 场景3数据都带到手工拆分
        this.setState({
          type: '4',
          columns: colsObj.columnsMulti, //多资产展示列
          dataSource: dataSource1,
        });
        return;
      }
      this.getSdTable(this.props.data.id, this.props.data); //获取手工拆分数据 单资产场景1 场景3，多资产场景2 获取数据
      this.setState({
        type: '4',
      });
    } else {
      //智能拆分设置type
      this.setState({
        type: '3',
        columns1: [],
        smartSplitType: '',
        dataSource1: [],
      });
    }
  };
  //拆分类型改变
  clickZnfp = (e) => {
    const { data } = this.props;
    const { selectData1, selectData2 } = this.state;
    this.setState({
      //为了表格loading效果
      smartSplitType: e,
      columns1: undefined,
      dataSource1: undefined,
    });
    if (e == '2') {
      //无产品首期,有真实交易
      this.props.dispatch({
        type: 'survivalManageM/splitTrade',
        payload: {
          listId: this.props.id,
          id: this.props.data.id,
          type: '2',
        },
        callback: (res) => {
          if (res) {
            if (res.dataSource) {
              res.dataSource.map((item) => {
                item.uid = uuid(16); //唯一id 作为表格编辑时 使用
                item.editable = false; //后端返回的列表数据 默认不可编辑
              });
              const fpRate = this.calcRate(data, res.dataSource || []);
              this.cfRate(fpRate);
            }
            this.setState({
              columns1: res.columns || [],
              dataSource1: res.dataSource || [],
            });
          } else {
            this.setState({
              columns1: [],
              dataSource1: [],
            });
          }
        },
      });
    }

    if (e == '1') {
      if (selectData1 && selectData1.length > 0) {
        let pid = selectData1.join(',');
        this.props.dispatch({
          type: 'survivalManageM/splitTrade',
          payload: {
            listId: this.props.id,
            id: this.props.data.id,
            pid: pid,
            type: 1,
          },
          callback: (res) => {
            if (res) {
              if (res.dataSource) {
                res.dataSource.map((item) => {
                  item.uid = uuid(16); //唯一id 作为表格编辑时 使用
                  item.editable = false; //后端返回的列表数据 默认不可编辑
                });
                const fpRate = this.calcRate(data, res.dataSource || []);
                this.cfRate(fpRate);
              }
              this.setState({
                columns1: res.columns || [],
                dataSource1: res.dataSource || [],
              });
            } else {
              this.setState({
                columns1: [],
                dataSource1: [],
              });
            }
          },
        });
      } else {
        message.info('请从右侧下拉框选择产品');
      }
    }
    if (e == '3') {
      if (selectData2 && selectData2.length > 0) {
        let pid = selectData2.join(',');
        this.props.dispatch({
          type: 'survivalManageM/splitTrade',
          payload: {
            listId: this.props.id,
            id: this.props.data.id,
            pid: pid,
            type: '3',
          },
          callback: (res) => {
            if (res) {
              if (res.dataSource) {
                res.dataSource.map((item) => {
                  item.uid = uuid(16); //唯一id 作为表格编辑时 使用
                  item.editable = false; //后端返回的列表数据 默认不可编辑
                });
                const fpRate = this.calcRate(data, res.dataSource || []);
                this.cfRate(fpRate);
              }
              this.setState({
                columns1: res.columns || [],
                dataSource1: res.dataSource || [],
              });
            } else {
              this.setState({
                columns1: [],
                dataSource1: [],
              });
            }
          },
        });
      } else {
        message.info('请从右侧下拉框选择产品');
      }
    }
  };
  //计算拆分比例
  cfRate = (cfRate) => {
    this.setState({
      cfRate: cfRate,
    });
  };

  //产品切换
  cpOnChange1 = (e) => {
    const { data } = this.props;
    const { smartSplitType } = this.state;
    if (e && e.length > 0 && smartSplitType == '1') {
      let pid = e.join(',');
      this.props.dispatch({
        type: 'survivalManageM/splitTrade',
        payload: {
          listId: this.props.id,
          id: this.props.data.id,
          pid: pid,
          type: 1,
        },
        callback: (res) => {
          if (res) {
            if (res.dataSource) {
              res.dataSource.map((item) => {
                item.uid = uuid(16); //唯一id 作为表格编辑时 使用
                item.editable = false; //后端返回的列表数据 默认不可编辑
              });
              const fpRate = this.calcRate(data, res.dataSource || []);
              this.cfRate(fpRate);
            }
            this.setState({
              columns1: res.columns,
              dataSource1: res.dataSource,
            });
          }
        },
      });
    }
  };

  cpOnChange11 = (e) => {
    if (e && e.length == 0) {
      this.setState({
        columns1: [],
        dataSource1: [],
      });
    }
    this.setState({
      selectData1: e,
    });
  };

  cpOnChange3 = (e) => {
    const { data } = this.props;
    const { smartSplitType } = this.state;
    if (e && e.length > 0 && smartSplitType == '3') {
      let pid = e.join(',');
      this.props.dispatch({
        type: 'survivalManageM/splitTrade',
        payload: {
          listId: this.props.id,
          id: this.props.data.id,
          pid: pid,
          type: 3,
        },
        callback: (res) => {
          if (res) {
            if (res.dataSource) {
              res.dataSource.map((item) => {
                item.uid = uuid(16); //唯一id 作为表格编辑时 使用
                item.editable = false; //后端返回的列表数据 默认不可编辑
              });
              const fpRate = this.calcRate(data, res.dataSource || []);
              this.cfRate(fpRate);
            }
            this.setState({
              columns1: res.columns,
              dataSource1: res.dataSource,
            });
          }
        },
      });
    }
  };

  cpOnChange33 = (e) => {
    if (e && e.length == 0) {
      this.setState({
        columns1: [],
        dataSource1: [],
      });
    }
    this.setState({
      selectData2: e,
    });
  };
  //智能拆分 编辑保存时修改拆分状态
  changeSplitType = (data1) => {
    const { data } = this.props;
    const { smartSplitType } = this.state;
    if (this.state.isDiabledSmart) return;
    this.props.form.setFieldsValue({
      type: 2,
    });
    this.state.columns1.pop(); //因为父子组件 对象联动 导致columns1被修改，子组件操作列不再进行重新渲染，导致数据滞后，故恢复初始数据
    this.setState({
      columns: smartSplitType == 1 || smartSplitType == 3 ? colsObj.columnsMulti : data.tradeDir == 1 ? colsObj.columnsCash : colsObj.columnsHold, //多资产1 (单资产0 只有方向为1的时候展示可用现金 其他情况展示持仓数量)
      columns1: [],
      dataSource1: [],
      dataSource: JSON.parse(data1),
    });
    this.setState({
      splitType: 2,
      type: '4',
      isDiabledSmart: true,
    });
  };

  //拆分模态框内容
  cfInfo = () => {
    const { getFieldDecorator } = this.props.form;
    const { data, productObj, assetType } = this.props;
    const { selectData1, selectData2, smartSplitType } = this.state;
    return (
      <div>
        <div>
          <SecondHeaderC title='拆分交易' />
        </div>
        <Row style={{ marginLeft: '-36px' }}>
          <Col style={{ textAlign: 'right' }} span={3}>
            证券代码：
          </Col>
          <Col style={{ textAlign: 'left' }} span={3}>
            {data.secuCode ? data.secuCode : '--'}
          </Col>
          <Col style={{ textAlign: 'right' }} span={3}>
            证券名称：
          </Col>
          <Col style={{ textAlign: 'left' }} span={3}>
            {data.secuName ? data.secuName : '--'}
          </Col>
          <Col style={{ textAlign: 'right' }} span={3}>
            交易市场：
          </Col>
          <Col style={{ textAlign: 'left' }} span={3}>
            {data.tradeMarketName ? data.tradeMarketName : '--'}
          </Col>
          <Col style={{ textAlign: 'right' }} span={3}>
            资产类型：
          </Col>
          <Col style={{ textAlign: 'left' }} span={3}>
            {data.tradeTypeName ? data.tradeTypeName : '--'}
          </Col>
          <Col style={{ textAlign: 'right', marginTop: '10px' }} span={3}>
            交易方向：
          </Col>
          <Col style={{ textAlign: 'left', marginTop: '10px' }} span={3}>
            {data.tradeDirDesc ? data.tradeDirDesc : '--'}
          </Col>
          <Col style={{ textAlign: 'right', marginTop: '10px' }} span={3}>
            总交易数量：
          </Col>
          <Col style={{ textAlign: 'left', marginTop: '10px' }} span={3}>
            {data.tradeTotalNum ? data.tradeTotalNum : '--'}
          </Col>
          <Col style={{ textAlign: 'right', marginTop: '10px' }} span={3}>
            交易价格(净价)：
          </Col>
          <Col style={{ textAlign: 'left', marginTop: '10px' }} span={3}>
            {data.tradePrice ? Number(data.tradePrice).toFixed(2) + '元' : '--'}
          </Col>
          <Col style={{ textAlign: 'right', marginTop: '10px' }} span={3}>
            交易金额：
          </Col>
          <Col style={{ textAlign: 'left', marginTop: '10px' }} span={3}>
            {data.tradeAmount ? Number(data.tradeAmount).toFixed(2) + '元' : '--'}
          </Col>
          <Col style={{ textAlign: 'right', marginTop: '10px' }} span={3}>
            交易费：
          </Col>
          <Col style={{ textAlign: 'left', marginTop: '10px' }} span={3}>
            {data.enFare1 ? Number(data.enFare1).toFixed(2) + '元' : data.enFare1 == 0 ? Number(data.enFare1).toFixed(2) : '--'}
          </Col>
          <Col style={{ textAlign: 'right', marginTop: '10px' }} span={3}>
            印花税：
          </Col>
          <Col style={{ textAlign: 'left', marginTop: '10px' }} span={3}>
            {data.enFare2 ? Number(data.enFare2).toFixed(2) + '元' : data.enFare2 == 0 ? Number(data.enFare2).toFixed(2) : '--'}
          </Col>
          <Col style={{ textAlign: 'right', marginTop: '10px' }} span={3}>
            过户费：
          </Col>
          <Col style={{ textAlign: 'left', marginTop: '10px' }} span={3}>
            {data.enFare3 ? Number(data.enFare3).toFixed(2) + '元' : data.enFare3 == 0 ? Number(data.enFare3).toFixed(2) : '--'}
          </Col>
          <Col style={{ textAlign: 'right', marginTop: '10px' }} span={3}>
            佣金：
          </Col>
          <Col style={{ textAlign: 'left', marginTop: '10px' }} span={3}>
            {data.enFare4 ? Number(data.enFare4).toFixed(2) + '元' : data.enFare4 == 0 ? Number(data.enFare4).toFixed(2) : '--'}
          </Col>
          <Col style={{ textAlign: 'right', marginTop: '10px' }} span={3}>
            经手费：
          </Col>
          <Col style={{ textAlign: 'left', marginTop: '10px' }} span={3}>
            {data.enFare5 ? Number(data.enFare5).toFixed(2) + '元' : data.enFare5 == 0 ? Number(data.enFare5).toFixed(2) : '--'}
          </Col>
          <Col style={{ textAlign: 'right', marginTop: '10px' }} span={3}>
            证管费：
          </Col>
          <Col style={{ textAlign: 'left', marginTop: '10px' }} span={3}>
            {data.enFare6 ? Number(data.enFare6).toFixed(2) + '元' : data.enFare6 == 0 ? Number(data.enFare6).toFixed(2) : '--'}
          </Col>
          <Col style={{ textAlign: 'right', marginTop: '10px' }} span={3}>
            其他费：
          </Col>
          <Col style={{ textAlign: 'left', marginTop: '10px' }} span={3}>
            {data.enFare7 ? Number(data.enFare7).toFixed(2) + '元' : data.enFare7 == 0 ? Number(data.enFare7).toFixed(2) : '--'}
          </Col>
          <Col style={{ textAlign: 'right', marginTop: '10px' }} span={3}>
            结算费：
          </Col>
          <Col style={{ textAlign: 'left', marginTop: '10px' }} span={3}>
            {data.enFeeJs2 ? Number(data.enFeeJs2).toFixed(2) + '元' : data.enFeeJs2 == 0 ? Number(data.enFeeJs2).toFixed(2) : '--'}
          </Col>
          <Col style={{ textAlign: 'right', marginTop: '10px' }} span={3}>
            交割费：
          </Col>
          <Col style={{ textAlign: 'left', marginTop: '10px' }} span={3}>
            {data.enFeeJg ? Number(data.enFeeJg).toFixed(2) + '元' : data.enFeeJg == 0 ? Number(data.enFeeJg).toFixed(2) : '--'}
          </Col>
          <Col style={{ textAlign: 'right', marginTop: '10px' }} span={3}>
            总税费：
          </Col>
          <Col style={{ textAlign: 'left', marginTop: '10px' }} span={3}>
            {data.enFareTotal ? Number(data.enFareTotal).toFixed(2) + '元' : data.enFareTotal == 0 ? Number(data.enFareTotal).toFixed(2) : '--'}
          </Col>
          <Col style={{ textAlign: 'right', marginTop: '10px' }} span={3}>
            已分配比例：
          </Col>
          <Col style={{ textAlign: 'left', marginTop: '10px' }} span={3}>
            {this.state.cfRate}%
          </Col>
        </Row>

        <Row style={{ marginTop: '5px' }} className={styles.Newradio}>
          <Form layout='inline'>
            <Col span={24} style={{ marginLeft: '5px' }}>
              <FormItem label='拆分方式'>
                {getFieldDecorator('type', {
                  initialValue: data.allocStatus == '1' ? 2 : this.state.splitType,
                  rules: [{ required: true }],
                })(
                  <RadioGroup onChange={(e) => this.cfTypeChange(e)}>
                    <Radio disabled={data.allocStatus == '1' || this.state.isDiabledSmart ? true : false} value={1}>
                      智能拆分
                    </Radio>
                    <Radio value={2}>手工拆分</Radio>
                  </RadioGroup>,
                )}
              </FormItem>
            </Col>
          </Form>
        </Row>
        {this.state.type == '3' && (
          <div style={{ marginTop: '5px', display: 'flex' }}>
            <div>
              <Select
                allowClear
                mode='multiple'
                className={styles.selectCls}
                style={{ width: '180px' }}
                onBlur={(e) => this.cpOnChange1(e)}
                onChange={(e) => this.cpOnChange11(e)}
                value={this.state.selectData1}
                filterOption={(input, option) => {
                  if (option && option.props && option.props.title) {
                    return option.props.title === input || option.props.title.indexOf(input) !== -1;
                  } else {
                    return true;
                  }
                }}
              >
                {this.state.select1 &&
                  this.state.select1.map((item, index) => {
                    return (
                      <Select.Option value={item.id} title={item.productname} key={index}>
                        {item.productname}
                      </Select.Option>
                    );
                  })}
              </Select>
              <PrimaryC style={{ marginLeft: '10px' }} title='有产品到期,无产品首期' disabled={selectData1.length == false} onClick={(e) => this.clickZnfp('1')} />
              <Divider type='vertical' className={styles.line} />
            </div>
            <div>
              <PrimaryC title='无产品首期,有真实交易' onClick={(e) => this.clickZnfp('2')} />
              <Divider type='vertical' className={styles.line} />
            </div>
            <div>
              <Select
                allowClear
                mode='multiple'
                style={{ width: '180px' }}
                onBlur={(e) => this.cpOnChange3(e)}
                onChange={(e) => this.cpOnChange33(e)}
                value={this.state.selectData2}
                className={styles.selectCls}
                filterOption={(input, option) => {
                  if (option && option.props && option.props.title) {
                    return option.props.title === input || option.props.title.indexOf(input) !== -1;
                  } else {
                    return true;
                  }
                }}
              >
                {this.state.select2 &&
                  this.state.select2.map((item, index) => {
                    return (
                      <Select.Option value={item.id} title={item.productname} key={index}>
                        {item.productname}
                      </Select.Option>
                    );
                  })}
              </Select>
              <PrimaryC style={{ marginLeft: '10px' }} title='有产品首期,有资产买入' disabled={selectData2.length == false} onClick={(e) => this.clickZnfp('3')} />
            </div>
          </div>
        )}
        <Row style={{ marginTop: this.state.type == '3' ? '10px' : '0px' }}>
          {this.state.type == '3' && (
            <TransactionFlow
              type='3'
              dataSource={this.state.dataSource1}
              columns={this.state.columns1}
              data={this.props.data}
              onRef={(ref) => this.setState({ child: ref })}
              cfRate={this.cfRate}
              changeSplitType={this.changeSplitType}
            />
          )}
          {this.state.type == '4' && (
            <TransactionFlow
              type='4'
              dataSource={this.state.dataSource}
              columns={this.state.columns}
              data={this.props.data}
              onRef={(ref) => this.setState({ child: ref })}
              productList={assetType === undefined ? (smartSplitType == 2 ? productObj['0'] : smartSplitType === '' ? productObj['0'] : productObj['1']) : productObj[assetType]}
              cfRate={this.cfRate}
            />
          )}
        </Row>
      </div>
    );
  };
  render() {
    return (
      <Modal title='拆分' visible={this.props.visible1} maskClosable={false} onOk={this.cfOK} onCancel={this.cfCancel} width={1090}>
        <div>{this.cfInfo()}</div>
      </Modal>
    );
  }
}
